(function(window) {
    'use strict';

    // Your starting point. Enjoy the ride!

    const vm = new Vue({
        el: '#app',
        data: {
            msg: '测试vue',
            // 存储用户当前输入的单条
            userInput: '',
            // 存储用户输入所有数据
            list: [],
            // 存储未处理的事件数量
            theItems: 0,
            // 一个标记
            editFlag: -1
        },
        methods: {

            enterDown(e) { //这个函数处理输入框回车被按下时
                if (e.keyCode === 13) {
                    console.log('回车被按下了，保存用户输入的信息');
                    // console.log(this.userInput); //获取用户刚刚输入的信息
                    let id = this.list.length == 0 ? 1 : this.list[0].id + 1;
                    this.list.unshift({
                        userInput: this.userInput,
                        ischecked: false,
                        id
                    });
                    console.log(this.list);
                    // 清空输入框
                    this.userInput = '';

                    // 判断还剩几个事件没处理
                    this.itemLeft();
                }
            },
            enterUp() { // 编辑框的回车按下 
                this.editFlag = -1;
            },
            finish(id) { //根据表单是否被勾选完成来更新数据(其实可以用v-model来绑定)
                // console.log(this.list[index].ischecked);

                this.list.find(v => v.id == id).ischecked = !this.list.find(v => v.id == id).ischecked;
                // console.log('啊');

                // 判断还剩几个事件没处理
                this.itemLeft();

            },
            clearComplete() { //清除已完成的实现
                console.log('清除已完成被点了');
                // 找出list中完成选项清除即可
                this.list = this.list.filter(element => {
                    if (element.ischecked === false) {
                        return element;
                    }
                });

                console.log(this.list);

                // 判断还剩几个事件没处理
                this.itemLeft();
            },
            destroy(index) { //删除指定项
                //点击删除按钮时的处理函数
                // console.log('北点了', index);
                this.list.splice(index, 1);

                // 判断还剩几个事件没处理
                this.itemLeft();

            },
            itemLeft() { //计算数据库中剩余未完成的项
                let sum = 0;
                this.list.forEach(element => {
                    if (element.ischecked == false) {
                        sum++;
                    }
                });
                // console.log(sum);
                this.theItems = sum;
            },
            doubleClick(id) { // 双击菜单中任意一项，改变flag
                console.log('被双击了');
                this.editFlag = id;
            },
        },
        // 计算属性
        computed: {
            canShowFooter() {
                return this.list.length > 0;
            },
            canShowClCom() {
                return this.list.some(value => value.ischecked == true);
            }
        },
        // 监听器
        watch: {
            list: {
                deep: true,
                handler: function(newData) {
                    // console.log(newData);  //监听list成功
                    window.localStorage.setItem('list', JSON.stringify(this.list));
                }
            }
        },
        // 钩子函数
        created() { //遍历data中的数据，劫持并赋值给vm后
            console.warn('响应式数据已部署');
            this.list = JSON.parse(window.localStorage.getItem('list')) || [];
        }
    });

})(window);